<template>
  <div class="login-container">
    <!-- 登录 -->
    <div class="login-wrap">
      <div class="login">
        <div class="loginform">
          <div class="loginuser">登录账号</div>

          <div class="content">
            <form action="##" :model="loginParams" :rules="loginRules">
              <div class="inputName">
                <input type="text" placeholder="邮箱/用户名/手机号" v-model='loginParams.phone' />
              </div>
              <div class="inputPassword">
                <input type="password" placeholder="请输入密码" v-model='loginParams.password' />
              </div>
              <div class="setting clearFix">
                <label class="checkbox inline">
                  <input name="m1" type="checkbox" value="2" />
                  自动登录
                </label>
                <span class="forget">忘记密码？</span>
              </div>
              <!-- form表单中的button按钮会自动提交数据,所以记得处理默认行为!! -->
              <button class="btn" @click.prevent="loginHandler">
                登&nbsp;&nbsp;录
              </button>
            </form>

            <div class="call clearFix">
              <router-link class="register" to="/register">立即注册</router-link>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
//引入组合式API
import { reactive, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
//引入提示信息组件
import { ElMessage } from 'element-plus'
//引入仓库并使用
import userInfoStore from '../../stores/login'
const useUserInfoStore = userInfoStore()
// import router from '../../router';
const route = useRoute()
const router = useRouter()

const validateUsername = (rule: any, value: any, callback: any) => {
  if (value.length < 4) {
    callback(new Error('用户名长度不能小于4位'))
  } else {
    callback()
  }
}
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value.length < 6) {
    callback(new Error('密码长度不能小于6位'))
  } else {
    callback()
  }
}

const loginRules = {
  phone: [{ required: true, validator: validateUsername }],
  password: [{ required: true, trigger: 'blur', validator: validatePassword }]
}
//定义登录携带的参数
let loginParams = reactive({
  phone: '123456',
  password: '123456'
})
//登录回调
const loginHandler = async () => {
  try {
    await useUserInfoStore.login(loginParams)
    ElMessage({
      type: 'success',
      message: '登录成功'
    })
    router.push('/recommend')
  } catch (error) {
    ElMessage({
      type: 'warning',
      message: '登录失败' + error
    })
  }
}
</script>

<style scoped>
.login-container .login-wrap {
  height: 487px;
  background: url('../../assets/14.jpg') repeat-x 0 0;
  margin-top: 10px;
}

.login-container .login {
  width: 1200px;
  height: 487px;
  margin: 0 auto;
}

.loginform {
  width: 420px;
  height: 406px;
  box-sizing: border-box;
  background: #fff;
  float: right;
  top: 45px;
  position: relative;
  padding: 20px;
}
.loginform .loginuser{
  width: 100%;
  height: 50px;
  font-size: 25px;
  text-align: center;
}

.loginform .tab li a {
  width: 100%;
  display: block;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 700;
  border: 1px solid #ddd;
  box-sizing: border-box;
  text-decoration: none;
}

.tab li .current {
  border-bottom: none;
  border-top-color: #28a3ef;
  color: #f93684;
}

.content {
  width: 380px;
  height: 316px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top: none;
  padding: 18px;
}

.content form {
  margin: 15px 0 18px 0;
  font-size: 12px;
  line-height: 18px;
}

.content form .input-text {
  margin-bottom: 16px;
}

.inputName {
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #e4e4e4;
  margin: 20px 0 10px;
  padding-left: 10px;
}

.inputPassword {
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #e4e4e4;
  padding-left: 10px;
  margin: 5px 0;
}

form .setting label {
  float: left;
}

form .setting .forget {
  float: right;
}

form .btn {
  background-color: #f93684;
  padding: 6px;
  border-radius: 0;
  font-size: 16px;
  font-family: 微软雅黑;
  word-spacing: 4px;
  border: 1px solid #f93684;
  color: #fff;
  width: 100%;
  height: 36px;
  margin-top: 25px;
  outline: none;
}

.content .call {
  margin-top: 30px;
}

.call ul {
  float: left;
}

.call ul li {
  float: left;
  margin-right: 5px;
}

.call .register {
  float: right;
  font-size: 15px;
  line-height: 38px;
}

.register:hover {
  color: #4cb9fc;
  text-decoration: underline;
}

.copyright {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  line-height: 24px;
}

.copyright ul li {
  display: inline-block;
  border-right: 1px solid #e4e4e4;
  padding: 0 20px;
  margin: 15px 0;
}
</style>